html, body{
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
    overflow-x:hidden;
}

body{
  font-family: myriad-pro-condensed, sans-serif;
  background-color: #ffffff;
  background-color:#f4f4f4 ;
}

/**HEADER**/
/**LOGO-LEGAL**/

.logo-superior {
    position: fixed;
    z-index: 100;
    width: 100px;
    margin: 0%;
  }
      
.legal-lateral {
    position: absolute ;
    top: 80px;
    right: 5px;
    width: 35px;
    z-index: 100;
  }

  /**BTN FLOTANTE**/
  .btnFlotante{
    position: fixed;
    bottom: 33px;
    right: 10px;
    width: 90px;
    height: 80px;
    z-index: 700;
    cursor: pointer;
  }

  .btnFlotante:hover{
    transform: translateY(-4%);
    transform: scale(1.1);
  }

  /**MENU HAMBURGUESA**/

  .navbar-toggler{
    border: none;
    border-radius: none;
  }

  .navbar-toggler:focus{
    box-shadow: none;
  }

  .nav-link{
    font-size: 1.5rem;
    color: #707070;
    font-style: italic;
  }

  .btn-close{
    background: none;
    --bs-btn-close-opacity: none;
    --bs-btn-close-hover-opacity: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
  }

  .offcanvas-header .btn-close{
    padding: none;
    margin-left: -40px;
  }

  .offcanvas.offcanvas-end{
    border: none;
  }

  /**HEDER INICIAL**/
  .header{
    padding: 0px;
}

  .header  .header-desktop{
    display: inherit;
    width: 100%;
  }

  .header .header-mobile{
    display: none;
  }

  /**BODY**/
  .remesadoras-texto{
    background-color: #ed1c27;
    padding-top: 50px;
    padding-bottom: 0px;
    margin-bottom: 100px;
  }

  #carouselExample{
    margin-bottom: -150px;
  }

  .remesadoras-texto p{
    color: #ffffff;
    font-size: 1.5rem;
  }

  .beneficios-texto{
    background-color: #ed1c27;
    padding-top: 50px;
    padding-bottom: 0px;
    margin-bottom: 50px;
  }

  .beneficios-texto p{
    color: #ffffff;
    font-size: 1.5rem;
  }

  .beneficios-texto h1{
    color: #ffffff;
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
  }

  .canales-texto{
    background-color: #ed1c27;
    padding-top: 50px;
    padding-bottom: 0px;
    margin-bottom: 50px;
  }

  .card-canales{
    margin-bottom: -150px;
  }

  .canales-texto p{
    color: #ffffff;
    font-size: 1.5rem;
  }

  .canales-texto h1{
    color: #ffffff;
    font-size: 40px;
    font-style: italic;
    font-weight: 600;
  }

  .canales-hiper p{
    font-size: 25px;
    color: #707070;
  }

  .canales-hiper p a{
    font-size: 25px;
    color: #ed1c27;
    font-style: italic;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline #ed1c27;
  }

  .agencias-texto{
    background-color: #ed1c27;
    padding-top: 50px;
    padding-bottom: 0px;
    margin-bottom: 100px;
  }


  .agencias-texto p{
    color: #ffffff;
    font-size: 1.5rem;
  }

  .agencias-texto h1{
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    font-style: italic;
  }

  .preguntas-texto{
    background-color: #ed1c27;
    padding-top: 50px;
    padding-bottom: 0px;
    margin-bottom: 50px;
  }

  .preguntas-texto p{
    color: #ffffff;
    font-size: 1.5rem;
  }

  .preguntas-texto h1{
    color: #ffffff;
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
  }

  .preguntas-texto .celular{
    margin-bottom: -170px;
  }


  /**CARRUSEL REMESAS**/

  #carouselExample{
    padding-bottom: -15px;
  }

  .card-wrapper{
    display: flex;
  }

  .card{
    margin: 10px;
    border-radius: 35px;
    width: calc(50%/2);
    background: none;
    border: none;
  }

  .card img{
    border-radius: 35px;
    box-shadow: -5px 6px 24px -8px rgba(87,87,87,1);
  }

  .card-inicio{
    margin-left: 120px;
  }

  .card-fin{
    margin-right: 120px;
  }

  .image-wrapper{
    height: 22vw;
    margin: 0 auto;
  }
 

  .carousel-control-next, .carousel-control-prev{
    opacity: 100;
    
  }

  /**CARD-BENEFICIOS**/

  .card-beneficios {
    background-color: #ffffff;
    border-radius: 20px;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 15px 15px -20px 20px rgb(44, 44, 44);

  }

  .card-beneficios img{
    width: 40px;
  }

  .card-beneficios p{
    font-size: 20px;
    color: #707070;
    text-align: left;

  }

  .card-beneficios:hover{
    box-shadow: 15px 15px -20px 20px rgb(44, 44, 44);
        transform: translateY(-4%);
  }


  /**CARDS CANALES**/
  .card-canales .canal img{
    width: 250px;
  }

  .canal:hover{
    box-shadow: 15px 15px -20px 20px rgb(44, 44, 44);
        transform: translateY(-4%);
  }

  .card-canales  .card-desktop{
    display: inherit;
    width: 100%;
  }

  .card-canales .card-mobile{
    display: none;
  }


  /**PROMOCIONES**/

  .promociones h1{
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    color: #707070;
  }

  /**MENU FOOTER**/

  .menu-footer{
    background-color: #ffffff;
  }

  .menu-footer h1{
    font-size: 45px;
    font-style: italic;
    font-weight: 700;
    color: #707070;
  }

  .imagen-uno:hover{
        box-shadow: 15px 15px -20px 20px rgb(44, 44, 44);
        transform: translateY(-4%);
        transform: scale(1.1);
    
  }

  /**CAJEROS**/

  .cajeros h1{
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    color: #707070;
  }

  .cajeros p{
    font-size: 25px;
    color: #707070;
  }

  .cajeros p a{
    font-size: 25px;
    color: #ed1c27;
    font-style: italic;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline #ed1c27;
  }

  /**PREGUNTAS FRECUENTES**/

  .accordion{
    --bs-accordion-active-color:none;
    --bs-accordion-btn-focus-border-color:none;
    --bs-accordion-btn-focus-box-shadow:none;
    --bs-accordion-border-color:none;
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon:none;

  }

  :root, [data-bs-theme=light]{
    --bs-border-radius: 30px;
  }

  .accordion-item{
    border: none;
  }

  .accordion-button {
    font-size: 23px;
    font-weight: 600;
    font-style: italic;
    color: #707070;

  }

  .accordion-body{
    background-color: #ed1c27;
    border-radius: 0px 0px 30px 30px;
  }

  .accordion-body p{
    font-size: 20px;
    color: #ffffff;
    text-align:left ;

  }

  .accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #ed1c27;

  }

  .accordion-button:after{
    color: #ffffff;

  }

  .btn-mas{
    position: relative;
    width: 30px;
    margin: 10px;
    justify-content: end;
  }



  /**FOOTER**/

  .footer{
    background-color: #707070;
  }

  .footer p{
    color:#ffffff;

  }


  /**MODAL INICIAL**/

  .modal{
    --bs-modal-header-border-width:none;
    position:fixed;
    top: 25%;
  }


  .modal-content{
    border: none;
    border-radius: 30px;
  }

  .modal-header{
    padding-bottom: 0px;
  }

  .modal-body{
    padding-bottom: 20px;
  }

  .modal-body h1{
    font-size: 20px;
    color: #707070;
    font-weight: 500;

  }

  .modal-body p{
    font-size: 15px;
    color: #707070;
    font-weight: 400;

  }


  /**MEDIA Q**/

  @media screen and (max-width: 800px) {

    .logo-superior {
        position: fixed;
        z-index: 100;
        width: 80px;
        margin: 0%;
    }
        
    }
        
    @media screen and (max-width: 750px) {
    
    .logo-superior {
        position: fixed;
        z-index: 100;
        width: 70px;
        margin: 0%;
    }

    .remesadoras-texto{
        background-color: #ed1c27;
        padding-top: 50px;
        padding-bottom: 0px;
        margin-bottom: 150px;
      }

      #carouselExampleSmall{
        margin-bottom: -100px;
      }

      .preguntas-texto .celular{
        margin-bottom: -100px;
      }


             
    }
        
    @media screen and (max-width: 768px) {

        .header .header-desktop {
            display: none;
          }
        
        .header .header-mobile {
            display: inherit;
            width: 100%;
          }
          
          .card-canales  .card-desktop{
            display: none;
          }
        
          .card-canales .card-mobile{
            display: inherit;
            width: 100%;
          }
          #carouselExampleSmall{
            margin-bottom: -100px;
          }

          .preguntas-texto .celular{
            margin-bottom: -100px;
          }
    
      }

    @media screen and (min-width: 568px) {
        
    }

    @media screen and (max-width: 567px) {
        .card-wrapper{
            display: flex;
            justify-content: center;
          }
        
          .card{
            margin: 10px;
            border-radius: 35px;
            width: calc(60%/1);
            background: none;
            border: none;
          }
        
          .card img{
            border-radius: 35px;
            box-shadow: 0px 0px 20px -10px rgba(87,87,87,1);
          }
        
        
          .image-wrapper{
            height: 50vw;
          }

          #carouselExampleSmall{
            margin-bottom: -100px;
          }

          .preguntas-texto .celular{
            margin-bottom: -100px;
          }


        
    }

      
    @media screen and (max-width: 487px) {
     
      }
      
    @media screen and (max-width: 414px) {
        .navbar-toggler{
            width: 40%;
            padding: 0px;
            margin-left: 50px;
            margin-right: -30px;
        }
    
        .offcanvas-header .btn-close{
            padding: none;
            margin-left: -20px;
          }
      
      }
      
    @media screen and (max-width: 390px) {

    .navbar-toggler{
        width: 40%;
        padding: 0px;
        margin-left: 50px;
        margin-right: -30px;
    }

    .offcanvas-header .btn-close{
        padding: none;
        margin-left: -20px;
      }

      .card-wrapper{
        display: flex;
        justify-content: center;
      }
    
      .card{
        margin: 10px;
        border-radius: 35px;
        width: calc(60%/1);
        background: none;
        border: none;
      }
    
      .card img{
        border-radius: 35px;
        box-shadow: 0px 0px 20px -10px rgba(87,87,87,1);
      }
    
    
      .image-wrapper{
        height: 50vw;
      }

      #carouselExampleSmall{
        margin-bottom: -100px;
      }

      .preguntas-texto .celular{
        margin-bottom: -100px;
      }

      }
      
    @media screen and (max-width: 375px) {

        .card-wrapper{
            display: flex;
            justify-content: center;
          }
        
          .card{
            margin: 10px;
            border-radius: 35px;
            width: calc(60%/1);
            background: none;
            border: none;
          }
        
          .card img{
            border-radius: 35px;
            box-shadow: 0px 0px 20px -10px rgba(87,87,87,1);
          }
        
        
          .image-wrapper{
            height: 50vw;
          }

          #carouselExampleSmall{
            margin-bottom: -100px;
          }

          .preguntas-texto .celular{
            margin-bottom: -100px;
          }
    
      }
      
        
    @media screen and (max-width: 300px) {
    
        
    .logo-superior {
        position: fixed;
        z-index: 100;
        width: 40px;
        margin: 0%;
    }

    }
        
    @media screen and (max-width: 200px) {
    
        
    .logo-superior {
        position: fixed;
        z-index: 100;
        width: 40px;
        margin: 0%;
    }
                       
    }